<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb :routes="routes">
        <template slot="itemRender" slot-scope="{ route, routes, paths }">
          <span v-if="routes.indexOf(route) === routes.length - 1">{{ route.breadcrumbName }}</span>
          <router-link v-else :to="`${basePath}/${paths.join('/')}`">{{ route.breadcrumbName }}</router-link>
        </template>
      </a-breadcrumb>
    </div>
    <div id="content">
      <!-- 基础信息 -->
      <a-card>
        <div class="card-title">基础信息</div>
        <div>起运港口：{{truckInfo.protName}}</div>
        <div>门点地址：{{truckInfo.province}} {{truckInfo.city}} {{truckInfo.area}} {{truckInfo.address}}</div>
      </a-card>
      <!-- 装货费用 -->
      <a-card>
        <div class="card-title">装货费用</div>
        <a-table
          :row-key="record => record.id"
          :columns="columns"
          :data-source="data"
          bordered
          :pagination="false"
        ></a-table>
      </a-card>
      <!-- 送货费用 -->
      <a-card>
        <div class="card-title">送货费用</div>
        <a-table
          :row-key="record => record.id"
          :columns="columns2"
          :data-source="data2"
          bordered
          :pagination="false"
        ></a-table>
      </a-card>
    </div>
  </div>
</template>
<script>
import { queryTruckDistanceDetails } from '@/api/landCenter'

const columns = [
  {
    title: '箱型',
    customRender: (text, record, index) => {
      return record.containerType ? record.containerType : '--'
    }
  },
  {
    title: '基础价格(元)',
    customRender: (text, record, index) => {
      return record.basePrice ? record.basePrice : '/'
    }
  },
  {
    title: '套箱价格(元)',
    customRender: (text, record, index) => {
      return record.packagePrice ? record.packagePrice : '/'
    }
  },
  {
    title: '备注',
    customRender: (text, record, index) => {
      return record.remark || '/'
    }
  }
]
const columns2 = [
  {
    title: '箱型',
    customRender: (text, record, index) => {
      return record.containerType ? record.containerType : '--'
    }
  },
  {
    title: '基础价格(元)',
    customRender: (text, record, index) => {
      return record.basePrice ? record.basePrice : '/'
    }
  },
  {
    title: '拆箱价格(元)',
    customRender: (text, record, index) => {
      return record.packagePrice ? record.packagePrice : '/'
    }
  },
  {
    title: '备注',
    customRender: (text, record, index) => {
      return record.remark || '/'
    }
  }
]
export default {
  props: ['id'],
  data () {
    return {
      basePath: '/landCenter',
      routes: [
        {
          path: '/trailerFeeManagement',
          breadcrumbName: '拖车费管理'
        },
        {
          path: '',
          breadcrumbName: '查看'
        }
      ],
      loading: true,
      truckInfo: {},
      options: [],
      columns,
      data: [], // 装货费用
      columns2,
      data2: [] // 送货费用
    }
  },
  methods: {
    getTruckDetail (e) {
      queryTruckDistanceDetails(e)
        .then(res => {
          // // console.log(res.data)
          this.truckInfo = res.data
          this.data = res.data.loadingList
          this.data2 = res.data.deliveryList
        })
        .catch(rs => {})
    }
  },
  mounted () {
    this.getTruckDetail({
      distanceId: this.id
    })
  }
}
</script>
<style lang="less" scoped>
#content {
  margin: 24px;
  .ant-card {
    margin-bottom: 24px;
    border: none;
    .card-title {
      position: relative;
      padding-left: 16px;
      font-size: 18px;
      line-height: 1;
      color: #000;
      margin-bottom: 20px;
      &:before {
        content: '';
        width: 5px;
        height: 18px;
        background: #1890ff;
        border-radius: 4px;
        position: absolute;
        left: 0;
        top: -1px;
      }
    }
    span {
      display: inline-block;
      height: 40px;
      line-height: 40px;
    }
  }
}
</style>
